<script setup lang="ts">
const dropToVue3 = (param) => {
  menuSet(param)
}
const menuSet=(param)=>{
  let apply = document.querySelector(".apply")?.children
  console.log(apply);
  for(const index in apply){
    if(index === 'length'){
      break
    }
    apply[index].className = ""
  }
  param.target.className = "focus"
}
</script>

<template>
  <div id="container">
    <div class="topMenu">
      <h2 class="home_title">qiankun Main Page</h2>
      <ul ref="apply" class="apply" @click="dropToVue3"> 
        <li>vue3_page</li>
        <li>vue2_page</li>
      </ul>
    </div>
    <div class="home_main">
        <router-view></router-view>
    </div>
  </div>
</template>

<style scoped>
.home_title {
  text-align: center;
  margin: 0;
  color: #fff;
  background-color: rgb(52, 31, 5);
  height: 40px;
}

.apply {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  height: 35px;
  background-color: rgb(4, 6, 61);
}

.apply>* {
  width: 150px;
  cursor: pointer;
  text-align: center;
  padding: 5px 0;
  color: #fff;
}
.apply>*:hover{
  background-color: rgb(31, 79, 127);
}
.focus{
  background-color: rgb(7, 105, 202);
}
.home_main{
  height: calc(100vh - 75px);
  background-color: rgb(3, 62, 62);
  color: #fff;
}
</style>
